<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<select id="layout">
  <option value="dendrogram">系统树</option>
  <option value="compactBox">紧凑树</option>
</select>
<div id="mountNode"></div>
<script src="assets/hierarchy.js"></script>
<script src="../build/g6.js"></script>
<script src="../build/minimap.js"></script>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script>
  let currentLayout = 'dendrogram';
  const layouts = {
    dendrogram: function(data) {
      const result = Hierarchy.dendrogram(data, {
        direction: 'LR', // H / V / LR / RL / TB / BT
        nodeSep: 50,
        rankSep: 100
      });
      G6.Util.radialLayout(result);
      return result;
    },
    compactBox: function(data) {
      const result = Hierarchy.compactBox(data, {
        direction: 'LR',
        getId(d) { return d.id; },
        getHeight() { return 16 },
        getWidth() { return 16 },
        getVGap() { return 50 },
        getHGap() { return 50 }
      });
      G6.Util.radialLayout(result);
      return result;
    }
  };
  const minimap = new Minimap({ size: [300, 300], type: 'delegate' });
  const graph = new G6.TreeGraph({
    container: 'mountNode',
    width: 500,
    height: 500,
    pixelRatio: 2,
    plugins: [ minimap ],
    modes: {
      default: [{
        type: 'collapse-expand',
        onChange(item, collapsed) {
          const data = item.get('model').data;
          data.collapsed = collapsed;
          return true;
        }
      }, 'drag-canvas', 'zoom-canvas']
    },
    nodeStyle: {
      default: {
        fill: '#40a9ff',
        stroke: '#096dd9'
      }
    },
    edgeStyle: {
      default: {
        stroke: '#A3B1BF'
      }
    },
    linkCenter: true,
    layout: layouts[currentLayout]
  });
  G6.Global.defaultNode.size = 16;
  $.getJSON('./assets/data/flare.json', function(data) {
    G6.Util.traverseTree(data, node => {
      node.id = node.name;
    });
    graph.data(data);
    graph.render();
    graph.fitView();
  });
  document.getElementById('layout').addEventListener('change', (e) => {
    const layout = e.target.value;
    if (currentLayout !== layout) {
      currentLayout = layout;
      graph.changeLayout(layouts[currentLayout]);
    }
  });
</script>
</body>
</html>
